<template>
  <div class="content">
    <div id="components-form-demo-advanced-search">
      <a-form class="ant-advanced-search-form" :form="form">
        <a-row>
          <a-col :span="5">
            <a-form-item label="分组">
              <a-select default-value="" style="width: 220px" placeholder="全部" v-model="select.groupId">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.id" v-for="(item,index) in groupingList" :key="index">{{item.groupName}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="名字">
              <a-input placeholder="" v-model="select.name" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-space>
              <a-button type="primary" icon="search" @click="getContactsList">查询</a-button>
              <a-button style="background: #b38c01; color: #fff" type="primary" icon="reload" @click="reset">重置</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>

      <div style="padding-left: 20px">
        <a-space>
          <a-button type="primary" style="color: #fff" icon="plus-circle" @click="showModal(null)">添加</a-button>
          <!-- <a-button type="primary" style="color: #fff" icon="delete">批量删除</a-button> -->
        </a-space>
      </div>

      <div style="padding: 20px">
        <a-table :data-source="table.list" class="tableStyle" :row-selection="rowSelection" :pagination="{pageSize:10}">
          <a-table-column key="groupName" title="所属分组" data-index="groupName" />
          <a-table-column key="name" title="名字" data-index="name" />
          <a-table-column key="phone" title="手机号" data-index="phone" />
          <a-table-column key="createTime" title="操作时间" data-index="createTime" />
          <a-table-column key="select" title="操作">
            <template slot-scope="record">
              <a-button type="link" @click="showModal(record)"><a-icon type="edit" /></a-button>
              <a-popconfirm
                title="您确定要删除此联系人吗？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="confirm(record)"
                @cancel="cancel"
              >
                <a-button type="link"><a-icon type="delete" /></a-button>
              </a-popconfirm>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </div>
    <a-modal
      title="新增联系人"
      :visible="visible"
      width="700px"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form class="ant-advanced-search-form" :form="formData">
        <a-row>
          <a-col :span="11">
            <a-form-item label="名字">
              <a-input placeholder="请填写联系人名字" v-model="formData.name" />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="手机号">
              <a-input placeholder="请填写联系人手机号" v-model="formData.phone" />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="分组">
              <a-select
                :default-value="formData.groupId"
                placeholder="请选择联系人分组"
                style="width: 183px"
                @change="handleChange"
              >
                <a-select-option :value="item.id" v-for="(item, index) in groupingList" :key="index">{{
                  item.groupName
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="11" v-if="type != 4">
            <a-form-item label="是否黑名单">
              <a-switch @change="onSwitch" checked-children="是" un-checked-children="否" :default-checked="isSwitch" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <template slot="footer">
        <div style="text-align: center; padding-bottom: 50px">
          <a-button
            style="background-color: #b38c01; color: #fff"
            key="submit"
            type="primary"
            @click="handleCancel"
            icon="reload"
          >
            取消
          </a-button>
          <a-button key="back" type="primary" @click="handleOk" icon="diff"> 保存 </a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { addGrouping, getSmsGroupList } from '@/api/SMSRelated'
export default {
  name: 'SMSAudit',
  data() {
    return {
      form: this.$form.createForm(this, { name: 'advanced_search' }),
      table: {
        list: [],
      },
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          this.$emit('selection-change', selectedRowKeys)
        },
      },
      visible: false,
      confirmLoading: false,
      formData: {
        id: 0,
        name: '',
        phone: '',
        groupId: '',
        isBlack: 0,
      },
      userInfo: {},
      groupingList: [],
      type: 4,
      select: {
        name: '',
        groupId: '',
      },
      isSwitch: false,
      infoData: {},
    }
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
    this.getGroupingList()
    this.getContactsList()
  },
  methods: {
    onSwitch(checked) {
      if (checked) {
        this.formData.isBlack = 1
      } else {
        this.formData.isBlack = 0
      }
    },
    getGroupingList() {
      getSmsGroupList({ type: 1, userId: this.userInfo.id }).then((data) => {
        if (data.success) {
          this.groupingList = data.result
          console.log('+++++',this.groupingList)
        }
      })
    },

    getContactsList() {
      getSmsGroupList({
        type: 2,
        userId: this.userInfo.id,
        name: this.select.name,
        groupId: this.select.groupId,
        page: 1,
        size: 100000,
      }).then((data) => {
        if (data.success) {
          this.table.list = data.result.data
        }
      })
    },

    handleChange(value) {
      this.formData.groupId = value
    },
    showModal(e) {
      if (e != null) {
        this.type = 5
        this.formData = e
        if (this.formData.isBlack == 1) {
          this.isSwitch = true
        } else {
          this.isSwitch = false
        }
      } else {
        this.type = 4
      }
      this.visible = true
    },

    confirm(e) {
      addGrouping({ type:6, id: e.id }).then((data) => {
        if (data.success) {
          this.$message.success('该联系人删除成功！')
          this.getContactsList()
        }
      })
    },

    cancel(e) {
      this.$message.error('您已取消删除！')
    },
    handleCancel(e) {
      this.visible = false
    },

    reset(){
      this.select.name=''
      this.select.groupId=''
      this.getContactsList()
    },
    
    handleOk(e) {
      this.confirmLoading = true
      this.infoData = {
        type: this.type,
        userId: this.userInfo.id,
        groupId: this.formData.groupId,
        name: this.formData.name,
        phone: this.formData.phone,
        isBlack: this.formData.isBlack,
        id: this.formData.id,
      }
      addGrouping({ ...this.infoData }).then((data) => {
        this.confirmLoading = false
        if (data.success) {
          this.$message.success(`${this.formData.name}联系人添加成功！`)
          this.getContactsList()
          this.visible = false
        }
      })
    },
  },
}
</script>
<style scoped>
.content {
  width: 100%;
  height: 100%;
  background-color: #01232c !important;
}
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
</style>